<!DOCTYPE HTML>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ include file="pages/taglib.jsp" %>
<html>
<head>
    <base href="<%=basePath%>">
    <title>addRequirement</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <%@ include file="pages/link-script.jsp" %>
    <style>
        .btn-add{
            margin-top: 5px;
        }
        .ipt{
            border: none;
            outline: none;
            margin-left: 20px;
            height: 30px;
            padding-left: 10px;
            width: 90%;
        }
        .modal-open {
            overflow: auto;
        }
    </style>
</head>
<body>
<%@include file="pages/header.jsp" %>
<h4 class="sub-header">添加需求信息</h4>
<form action="addRequirement" enctype="multipart/form-data" method="post" class="form">
    <div class="row">
        <div class="form-group col-xs-7">
            <label for="requirementId">需求编号</label>
            <s:textfield class="form-control" name="requirementId" placeholder="xq-yyyy-number" required="true"/>
        </div>
        <div class="form-group col-xs-7">
            <label for="requirementType">需求类型</label>
            <select id="requirementType" name="requirementType" class="form-control" required="true">
                <option>C(变更需求)</option>
                <option>N(新增需求)</option>
            </select>
        </div>
        <div class="form-group col-xs-7">
            <label for="requirementKind">业务需求类别</label>
            <select id="requirementKind" name="requirementKind" class="form-control">
                <option>新业务新产品</option>
                <option>客户体验</option>
                <option>柜员操作</option>
                <option>内控管理</option>
                <option>外部监控</option>
                <option>大客户</option>
                <option>其他</option>
            </select>
        </div>
        <div class="form-group col-xs-7">
            <label for="requirementName">需求名称</label>
            <s:textfield class="form-control" name="requirementName" placeholder="requirementName"/>
        </div>
        <div class="form-group col-xs-7">
            <label for="requirementIntroduction">项目简介</label>
            <s:textarea class="form-control" row="3" name="requirementIntroduction"
                        placeholder="to introduce the requirement..."/>
        </div>
        <div class="form-group col-xs-7">
            <label for="applicationScope">应用范围</label>
            <s:textfield class="form-control" name="applicationScope" placeholder="this requirement will be used in ..."/>
    </div>
        <div class="form-group col-xs-7">
            <label for="requirementUnit">需求单位</label>
            <s:textfield class="form-control" name="requirementUnit" placeholder="which unit propose the requirement?"/>
        </div>
        <div class="form-group col-xs-7">
            <label for="sponsor">主办单位</label>
            <s:textfield class="form-control" name="sponsor" placeholder="which unit sponsor the requirement?"/>
        </div>
        <div class="form-group col-xs-7">
            <label for="coSponsor">协办单位</label>
            <s:textfield class="form-control" name="coSponsor" placeholder="which unit co-sponsor the requirement?"/>
        </div>
        <div class="form-group col-xs-7">
            <label for="requirementPerson">业务联系人</label>
            <s:textfield class="form-control" name="requirementPerson" placeholder="who propose the requirement?"/>
        </div>
        <div class="form-group col-xs-7">
            <label for="dealType">处理类型</label>
            <select id="dealType" name="dealType" class="form-control">
                <option>-----请选择-----</option>
            </select>
            <button type="button" class="btn btn-add btn-primary" data-toggle="modal" data-target="#myModal">添加类型</button>
        </div>
        <div class="form-group col-xs-7">
            <label for="dealTeam">受理团队</label>
            <select id="dealTeam" name="dealTeam" class="form-control">
                <option>-----请选择-----</option>
            </select>
            <button type="button" class="btn btn-add btn-primary" data-toggle="modal" data-target="#myModal1">添加团队</button>
        </div>
        <div class="form-group col-xs-7 input-append date" id="receiveDate">
            <label for="receiveDate">需求接收日期</label>
            <s:textfield id="receiveDate" class="form-control" name="receiveDate"
                         placeholder="when do you receive the requirement?" required="true"/>
            <span class="add-on"><i class="icon-calendar"></i></span>
            <script>
                $('#receiveDate').datetimepicker({
                    format: 'yyyy/mm/dd',
                    startDate: '2016/01/01',
                    autoclose: 'true',
                    minView: 'month',
                    todayBtn: 'linked',
                    todayHighlight: 'ture',
                    language: 'zh-CN'
                });
            </script>
        </div>
        <div class="form-group col-xs-7 input-append date" id="dealDate">
            <label for="dealDate">需求受理日期</label>
            <s:textfield id="dealDate" class="form-control" name="dealDate"
                         placeholder="when do you deal with the requirement?" required="true"/>
            <span class="add-on"><i class="icon-calendar"></i></span>
            <script>
                $('#dealDate').datetimepicker({
                    format: 'yyyy/mm/dd',
                    startDate: '2016/01/01',
                    autoclose: 'true',
                    minView: 'month',
                    todayBtn: 'linked',
                    todayHighlight: 'ture',
                    language: 'zh-CN'
                });
            </script>
        </div>
        <div class="form-group col-xs-7">
            <label for="dealResult">审批结果</label>
            <select id="dealResult" name="dealResult" class="form-control">
                <option value="">请选择</option>
                <option value="通过">通过</option>
                <option value="审批中">审批中</option>
                <option value="暂缓">暂缓</option>
                <option value="回绝">回绝</option>
                <option value="回退">回退</option>
            </select>
        </div>
        <div class="form-group col-xs-7">
            <label for="dealdetails">备注</label>
            <s:textfield class="form-control" name="dealdetails" placeholder="anything else..."/>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">添加</button>
</form>

<%@include file="pages/footer.jsp" %>

<!-- 类型弹窗 -->
<div class="modal fade aaa" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加处理类型</h4>
            </div>
            <div class="modal-body">
                <input class="ipt ipt-type" autofocus type="text" placeholder="请输入处理类型">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-add-type" data-dismiss="modal">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 团队弹窗 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">添加受理团队</h4>
            </div>
            <div class="modal-body">
                <input class="ipt ipt-team" type="text" autofocus placeholder="请输入受理团队">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-add-team" data-dismiss="modal">提交更改</button>
            </div>
        </div>
    </div>
</div>

</body>

<script type="text/javascript">
    $(function () {
        // 添加类型提交事件
        $(".btn-add-type").click(function () {
            var typeName = $(".ipt-type").val();
            console.log(typeName);
            $.post("/addProcessTypeAction",{"typeName":typeName},function () {

            },'json');
        });
        // 获取类型下拉列表
        $("#dealType").click(function () {
            $.ajax({
                type : 'post',
                url :  'selectProcessTypeAction.action',
                dataType : 'json',
                success : function(msg) {
                        var res = eval("(" + msg.result+ ")");
                        var opt = $("#dealType option");
                    if(opt.length != res.length){
                        $("#dealType").empty();
                        console.log("option",opt.length);
                        console.log("res",res.length);
                        $.each(res, function (i, item) {
                            $("#dealType").append("<option value="+item.typeId+">"+item.typeName+"</option>");
                        });
                    }
                },
                error : function() {
                }
            })
        });
        // 弹窗消失触发的事件
        $('#myModal').on('hidden.bs.modal',function () {
            $(".ipt-type").val("");
        });
        $('#myModal1').on('hidden.bs.modal',function () {
            $(".ipt-team").val("");
        });
        // 添加团队提交事件
        $(".btn-add-team").click(function () {
            var teamName = $(".ipt-team").val();
            console.log(teamName);
            $.post("/addAcceptTeamAction",{"teamName":teamName},function () {

            },'json');
        });
        // 获取团队下拉列表
        $("#dealTeam").click(function () {
            $.ajax({
                type : 'post',
                url :  'selectAcceptTeamAction.action',
                dataType : 'json',
                success : function(msg) {
                    var resp = eval("(" + msg.result+ ")");
                    var opts = $("#dealTeam option");
                    console.log("option",opts);
                    console.log("option",opts.length);
                    console.log("res",resp.length);
                    if(opts.length != resp.length){
                        $("#dealTeam").empty();
//                        $("#dealTeam").append("<option value=''>-----请选择-----</option>");
                        $.each(resp, function (i, item) {
                            $("#dealTeam").append("<option value="+item.teamId+">"+item.teamName+"</option>");
                        });
                    }
                },
                error : function() {
                }
            })
        });
    });
</script>

</html>

